<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>问卷管理界面</span>
        <el-button class="button" type="primary" @click="btnAddDialog"
          >添加</el-button
        >
      </div>
    </template>
    <!-- 查询 -->
    <el-form :inline="true" :model="frmQuery" class="demo-form-inline">
      <el-form-item label="问卷名称">
        <el-input
          v-model="frmQuery.t_context"
          placeholder="请问卷名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="问卷类型" :label-width="formLabelWidth">
                 
        <el-select v-model="frmQuery.ts_uid" placeholder="请选择问卷类型">
                    <el-option label="---请选择类型---" value=""></el-option>  
                 
          <el-option
            v-for="testselect in classData"
            :key="testselect.ts_uid"
            :label="testselect.ts_class"
            :value="testselect.ts_uid"
          />
                           
        </el-select>
             
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="btnQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="t_context" label="问卷名称" width="150" />
      <el-table-column prop="ts_class" label="问卷类型" width="150" />
      <el-table-column prop="t_answer1" label="答案1" width="150" />
      <el-table-column prop="t_answer2" label="答案2" width="150" />
      <el-table-column fixed="right" label="操作" width="">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="updateDialog(scope.row.t_uid)"
            >编辑</el-button
          >
          <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="否"
            title="确定要删除吗？"
            @confirm="deleteClick(scope.row.t_uid)"
          >
            <template #reference>
              <el-button link type="warning" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <br />
      <!-- 分页 -->
      <el-pagination 
    :currentPage="currentPage" 
    :page-size="pageSize" 
    :page-sizes="[5, 10, 20, 30, 40]" 
    :background="true"
    layout="total, sizes, prev, pager, next, jumper" 
    :total="pageInfo.total" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />
  </el-card>
  <!-- 添加-->
  <el-dialog v-model="dialogFormVisible" :title="dialogTitle">
    <el-form :model="form">
      <el-form-item label="问卷问题" :label-width="formLabelWidth">
        <el-input v-model="form.t_context" autocomplete="off" />
      </el-form-item>
      <el-form-item label="问卷类别" :label-width="formLabelWidth">
        <el-select v-model="form.ts_uid" placeholder="选择类别">
          <el-option
            v-for="testselect in classData"
            :key="testselect.ts_uid"
            :label="testselect.ts_class"
            :value="testselect.ts_uid"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="答案1" :label-width="formLabelWidth">
        <el-input v-model="form.t_answer1" autocomplete="off" />
      </el-form-item>
      <el-form-item label="答案2" :label-width="formLabelWidth">
        <el-input v-model="form.t_answer2" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addUser">保存</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 修改-->
  <el-dialog v-model="updateDialogVisible" :title="dialogTitle">
    <el-form :model="form">
      <el-form-item label="问卷问题" :label-width="formLabelWidth">
        <el-input v-model="form.t_context" autocomplete="off" />
      </el-form-item>
      <el-form-item label="问卷类别" :label-width="formLabelWidth">
        <el-select v-model="form.ts_uid" placeholder="选择类别">
          <el-option
            v-for="testselect in classData"
            :key="testselect.ts_uid"
            :label="testselect.ts_class"
            :value="testselect.ts_uid"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="答案1" :label-width="formLabelWidth">
        <el-input v-model="form.t_answer1" autocomplete="off" />
      </el-form-item>
      <el-form-item label="答案2" :label-width="formLabelWidth">
        <el-input v-model="form.t_answer2" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateUser">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      pageInfo: {},
      frmQuery: {
        ts_uid: "",
        t_context: "",
      },
      formLabelWidth: "140px",
      form: {},
      dialogFormVisible: false, //添加/修改对话框
      tableData: [],
      total: 0, // 数据总数，用于分页
      dialogTitle: "添加问卷信息",
      updateDialogVisible: false,
      classData: [],
    };
  },
  mounted() {
    this.LoadData(); // 加载问卷信息
    this.LoadClassData(); //加载问卷类型
    this.getData(1, 10) //分页
  },
  methods: {
        // 分页
        getData(num, size) {
      this.$http.get("http://localhost:8080/test/page", {
        params: {
          pageNum: num,
          pageSize: size,
        },
      }
      ).then((response) => {
        this.pageInfo = response.data
        this.tableData = this.pageInfo.list
      }).catch((err) => {
        console.log(err);
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getData(this.currentPage, this.pageSize)
      console.log("size", pageSize)

    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.getData(this.currentPage, this.pageSize)
      console.log("num", pageNum)

    },
    btnQuery() {
      console.log(this.frmQuery);
      this.LoadData();
    },

    LoadData() {
      this.$http
        .get(
          "http://localhost:8080/test/list?ts_uid=" +
            this.frmQuery.ts_uid +
            "&t_context=" +
            this.frmQuery.t_context
        )
        .then((res) => {
          this.tableData = res.data;
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    deleteClick(t_uid) {
      // 删除操作
      console.log(t_uid);
      this.$http
        .get("http://localhost:8080/test/del/" + t_uid)
        .then((res) => {
          console.log(res.data);
          if (res.data == 1) {
            console.log("删除成功！");
            this.LoadData();
            ElMessage({
              message: "删除成功！",
              type: "success",
            });
          } else {
            console.log("删除失败！");
            ElMessage({
              message: "删除失败！",
              type: "warning",
            });
          }
        })
        .catch((err) => {});
    },
    btnAddDialog() {
      this.form = {}; // 清空表单
      this.dialogTitle = "添加问卷信息";
      this.dialogFormVisible = true;
    },
    addUser() {
      console.log(this.form);
      this.$http
        .post("http://localhost:8080/test/add", this.form)
        .then((res) => {
          console.log(res.data);
          if (res.data == 1) {
            console.log("添加成功！");
            this.form = {};
            this.dialogFormVisible = false;
            this.LoadData();
            ElMessage({
              message: "添加成功！",
              type: "success",
            });
          } else {
            console.log("添加失败！");
            ElMessage({
              message: "添加失败！",
              type: "warning",
            });
          }
        })
        .catch((err) => {});
    },
    updateUser() {
      console.log(this.form);
      this.$http
        .post("http://localhost:8080/test/update", this.form)
        .then((res) => {
          console.log(res.data);
          if (res.data == 1) {
            console.log("修改成功！");
            this.form = {}; // 清空表单对象
            this.updateDialogVisible = false; // 关闭修改对话框
            this.LoadData(); // 重新加载数据
            ElMessage({
              message: "修改成功！",
              type: "success",
            });
          } else {
            console.log("修改失败！");
            ElMessage({
              message: "修改失败！",
              type: "warning",
            });
          }
        })
        .catch((err) => {});
    },
    updateDialog(t_uid) {
      // 编辑操作
      console.log(t_uid);
      this.$http
        .get("http://localhost:8080/test/get/" + t_uid)
        .then((res) => {
          console.log(res.data);
          this.form = res.data;
        })
        .catch((err) => {});
      this.updateDialogVisible = true;
    },
    // getClass() {
    //   console.log(this.frmQuery.t_class);
    //   this.$http
    //     .get("http://localhost:8080/test/find/" + this.frmQuery.t_class)
    //     .then((res) => {
    //       this.tableData = res.data;
    //       console.log(res.data);
    //     })
    //     .catch((err) => {
    //       console.log(err); /////
    //     });
    // },
    getContext() {
      console.log(this.frmQuery.t_context);
      this.$http
        .get("http://localhost:8080/test/query/" + this.frmQuery.t_context)
        .then((res) => {
          this.tableData = res.data;
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err); /////
        });
    },
    LoadClassData() {
      ///加载类别信息
      this.$http
        .get("http://localhost:8080/testselect/list")
        .then((res) => {
          this.classData = res.data;
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box-card {
  width: 100%;
}
</style>
